<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        .box {
          margin: 20px auto;
          width: 300px;
          height: 200px;
          border: 1px solid #000;
        }
  
        .title {
          height: 30px;
          display: flex;
          line-height: 30px;
          text-align: center;
        }
  
        .title > li {
          width: 100px;
        }
  
        .content > li {
          height: 170px;
        }
  
        .content > li:first-child,
        .content > li:nth-child(2),
        .content > li:last-child{
          display: none;
        }
  
        .active-title {
          background-color: rgb(130, 207, 237);
        }
  
        .active-content {
          display: block !important;
          background-color: rgb(130, 207, 237);
        }
      </style>
</head>
<body>
    <div class="box">
      <ul class="title">
        <li class="active-title">标题一</li>
        <li>标题二</li>
        <li>标题三</li>
      </ul>
      <ul class="content">
        <li class="active-content">内容一</li>
        <li>内容二</li>
        <li>内容三</li>
      </ul>
    </div>
<script>
      let Title = document.querySelector(".title");
      let TitleLi = document
        .querySelector(".title")
        .getElementsByTagName("li");
      let Content = document.querySelector(".content");
      let ContentLi = document.querySelector(".content").getElementsByTagName("li");
      TitleArr=[];
      for(const key of TitleLi){
        TitleArr.push(key)
      }
      ContentArr=[];
      for(const key of ContentLi){
        ContentArr.push(key)
      }
      for (let i = 0; i < TitleLi.length; i++) {
        TitleLi[i].onclick = function () {
          let Remove = TitleArr.filter((v) =>
            v !== Title
          );
          Remove.forEach((r) =>
            r.classList.remove("active-title")
          );
          TitleLi[i].classList.add("active-title");
          let Remove1 = ContentArr.filter((child) => 
            child !== Content
          );
          Remove1.forEach((r) =>
            r.classList.remove("active-content")
          );
          ContentLi[i].classList.add("active-content");
        };
      }
    </script>
</body>
</html>